// 数据
var wzDate = [{
        name: '热门文章',
        img: 'images/65-480x300.jpg',
        nr: '4个私域流量直播案例复盘',
        time: '2021年1月22日'
    },
    {
        name: '推荐文章',
        img: 'images/80-1-480x300.jpg',
        nr: '4个维度，搭建微信公众号运营系统！',
        time: '2020年7月30日'
    },
    {
        name: '经典文章',
        img: 'images/18-2-480x300.jpg',
        nr: '手游推广：5月超371家公司买量，投放TOP5中"...',
        time: '2019年6月5日'
    }
];
var Date = [{
        name: 'APP推广',
        img: 'images/92-1-480x300.jpg',
        h6: '如何通过种子用户运营打造爆品？',
        p: '种子用户一般都具有开放冒险的精神和创新的意识，他们拥抱变化，积极尝试新鲜产品或者事物，还能容忍新产品的不完美。',
        time: '20小时前'
    },
    {
        name: '产品运营',
        img: 'images/01-6-480x300.jpg',
        h6: '3000字拆解可复制的私域流量玩法',
        p: '恰恰，快乐的味道，这句广告语伴随了很多人的童年。作为中国休闲食品企业的代表，洽洽食品在营销中也不断出“新招”，以创新性、包容性和年轻化的品牌形象，成为国潮品牌的典型...',
        time: '6小时前'
    },
    {
        name: '品牌营销',
        img: 'images/05-480x300.jpg',
        h6: '如何撰写整合营销传播全案？',
        p: '整合营销传播全案，主要由两项八部分组成：定义问题（简报解读）；解决问题（调研分析、策略制定、概念主题、创意表现、媒体使用、时间排期、预算分配）。',
        time: '一天前'
    },
    {
        name: '文案圈',
        img: 'images/wenan-480x300.jpg',
        h6: '如何写出有价值的卖点文案',
        p: '看了很多文案的书，学了很多文案的课，你还是写不出好文案，你一定忽略了一个问题，那就是文案的根本目的。本文将告诉你卖点文案的目的、卖点文案的认知、卖点文案的原则和...',
        time: '31分钟前'
    },
    {
        name: '游戏推广',
        img: 'images/17-3-480x300.jpg',
        h6: '提升手游用户LTV，你需要注意的4个关键因素',
        p: ' 在广告变现的运营过程中，我们通常很关心每个用户所带来的收益，由此派生出两个衡量用户级别收益的指标：ARPU 和 LTV。 ARPU（AverageRevenue Pe…',
        time: '2021年1月28日'
    },
    {
        name: '海外推广',
        img: 'images/27-480x300-1.jpg',
        h6: '品牌如何布局海外网红营销矩阵？',
        p: '这几年，海外KOL营销已经成为营销界的热议话题，也成为各品牌出海最为热衷的方式之一。对于营销人员而言，为什么海外KOL营销是一种强有力的营销方式呢？因为相较品牌本身，大多数消费者更相信来自共同用户和第三方的推荐。海外 KOL…',
        time: '4天前'
    },
    {
        name: '青瓜早报',
        img: 'images/106.jpg',
        h6: '青瓜早报：百度香港二次上市获批；马化腾首评社区团购；趣头条第四季度营收13.02亿元 …',
        p: ' 早安，小伙伴们，一起来看今天的早报。 一、国内新闻 1.马化腾首评社区团购 今年，全国人大代表、腾讯董事会主席兼首席执行官马化腾继续在数字经济治理方面提出相关建议。...',
        time: '1天前'
    },
    {
        name: '联系我们',
        img: 'images/3-480x300.jpg',
        h6: '青瓜传媒投稿须知',
        p: ' 一、投稿范围 青瓜传媒 是全球互联网运营推广学习平台！专注移动互联网 产品运营、推广、营销、短视频、新媒体、文案、数据分析、互联网、行业分析等优质内容，投稿需符合本站属性，杜绝广告...',
        time: '2020年2月10日'
    },
    {
        name: '联系我们',
        img: 'images/3-480x300.jpg',
        h6: '青瓜传媒投稿须知',
        p: ' 一、投稿范围 青瓜传媒 是全球互联网运营推广学习平台！专注移动互联网 产品运营、推广、营销、短视频、新媒体、文案、数据分析、互联网、行业分析等优质内容，投稿需符合本站属性，杜绝广告...',
        time: '2020年2月10日'
    },
    {
        name: '联系我们',
        img: 'images/3-480x300.jpg',
        h6: '青瓜传媒投稿须知',
        p: ' 一、投稿范围 青瓜传媒 是全球互联网运营推广学习平台！专注移动互联网 产品运营、推广、营销、短视频、新媒体、文案、数据分析、互联网、行业分析等优质内容，投稿需符合本站属性，杜绝广告...',
        time: '2020年2月10日'
    }
];


var sousuo = document.getElementById('sousuo');
var nav = document.getElementById('nav');
var gb = document.getElementById('gb');
var search = document.getElementById('search');

sousuo.onclick = function () {
    nav.style.display = 'none';
    sousuo.style.display = 'none';
    search.style.display = 'block';
}

gb.onclick = function () {
    nav.style.display = 'block';
    sousuo.style.display = 'block';
    search.style.display = 'none';
}


var rightbox = document.getElementById('rightbox');
var dingbu=document.getElementById('dingbu');

window.onscroll = function () {
    var y = scrollY;
    var h = innerHeight;
    
    if (y >= 2435 - h + 84 && y <= 4524 - h + 84) {
        // rightbox.style.bottom=4524+84-y-h+'px';
        rightbox.style.position = 'fixed';
        rightbox.style.bottom = '0';
        rightbox.style.left = '50%';
        rightbox.style.marginLeft = 290 + 'px';
    } else if (y <= 2435 - h + 84) {
        rightbox.style.position = '';
        rightbox.style.bottom = '';
        rightbox.style.left = '';
        rightbox.style.marginLeft = '';
    } else {
        rightbox.style.position = '';
        rightbox.style.bottom = '0';
        rightbox.style.left = '';
        rightbox.style.marginLeft = '';
    }

    if(y>=300){
        dingbu.style.display='block';
    }else{
        dingbu.style.display='none'
    }
}

dingbu.onclick=function(){
    scrollTo({top:0,behavior:"smooth"})
}


var alist = document.getElementsByClassName('alist');
var item = document.getElementById('item');

for (var i = 0; i < alist.length; i++) {
    alist[i].index = i;
    alist[i].onclick = function () {
        item.innerHTML = '';
        for (var j = 0; j < alist.length; j++) {
            alist[j].className = 'alist';
        }
        var n = this.index;
        alist[n].className = 'alist active';
        if (n != 0) {
            var arr = Date.filter(function (item) {
                return item.name == alist[n].innerHTML
            })
            for (var n = 0; n < 20; n++) {
                item.innerHTML += `<li>
                        <div class="left">
                            <a href="">
                                <img src="${arr[0].img}">
                                <span>${arr[0].name}</span>
                            </a>
                        </div>
                        <div class="right">
                            <a href=""><h6>${arr[0].h6}</h6></a>
                            <p>${arr[0].p}</p>
                            <span>${arr[0].time}</span>
                        </div>
                    </li>`
            }
        } else {
            for (var m = 0; m < 2; m++) {
                for (var z = 0; z < Date.length; z++) {
                    item.innerHTML += `<li>
                        <div class="left">
                            <a href="">
                                <img src="${Date[z].img}">
                                <span>${Date[z].name}</span>
                            </a>
                        </div>
                        <div class="right">
                            <a href=""><h6>${Date[z].h6}</h6></a>
                            <p>${Date[z].p}</p>
                            <span>${Date[z].time}</span>
                        </div>
                    </li>`
                }
            }
        }
    }
}


for (var m = 0; m < 2; m++) {
    for (var z = 0; z < Date.length; z++) {
        item.innerHTML += `<li>
            <div class="left">
                <a href="">
                    <img src="${Date[z].img}">
                    <span>${Date[z].name}</span>
                </a>
            </div>
            <div class="right">
                <a href=""><h6>${Date[z].h6}</h6></a>
                <p>${Date[z].p}</p>
                <span>${Date[z].time}</span>
            </div>
        </li>`
    }
}

var xinfeng=document.getElementById('xinfeng');
var xfbox=document.getElementById('xfbox');
var xiala=document.getElementById('xiala')

xinfeng.onclick=function(){
    xinfeng.style.display='none';
    xfbox.style.display='block';
}

xiala.onclick=function(){
    xfbox.style.display='none';
    xinfeng.style.display='block';
}

var wenzhang = document.getElementsByClassName('wenzhang');

for (var i = 0; i < wzDate.length; i++) {
    var str='';
    for (var j = 0; j < 5; j++) {
        str += `<li>
                <div class="img">
                    <img src="${wzDate[i].img}">
                </div>
                <div class="wenzi">
                    <a href="">${wzDate[i].nr}</a>
                    <span>${wzDate[i].time}</span>
                </div>
            </li>`
    }
    wenzhang[i].innerHTML+='<ul>'+str+'</ul>'
}